<template>
  <div>
    <div class="w-full  m-auto flex flex-row items-center mt-[24px] s2k:mt-[32px] s4k:mt-[48px]">
      <div class="flex-[1] flex flex-col justify-center items-start text-[var(--theme-font-color)] text-[1.3rem] font-[500]">{{ week }}</div>
      <div class="flex-[25] h-[5vh] flex flex-row border-solid border-[var(--grid)] border-r s2k:h-[80px] s4k:h-[120px]" ref="cellRef">
        <!-- style="background:#961A49" -->
        <div class="flex-[1] flex text-start text-[#6B7280] text-[1.3rem] font-[500] border border-solid border-[var(--grid)] border-r-0 z-[99]" v-for="num in 24" :key="num"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted ,reactive,ref} from "vue";
const props = defineProps({
  weekData: {
    type: Object,
    default: {},
  },
})
const week = ref('')
const cellRef = ref();
const cellBox = (startTime, endTime, bgColor) => {
  let fullValue = cellRef.value.offsetWidth
  let oneDayMilliseconds = 24 * 60 * 60 * 1000
  let milliStart = TwoTimesMilliseconds("00:00", startTime);
  let milliseconds = TwoTimesMilliseconds(startTime, endTime);
  let startRatio = (milliStart / oneDayMilliseconds).toFixed(3) // 从头到起始点占比
  let ratio = (milliseconds / oneDayMilliseconds).toFixed(3) // 总共占比
  // console.log('startRatio',startRatio)
  // console.log('ratio',ratio)
  // 设置背景色范围
  cellRef.value.style.position = "relative";
  cellRef.value.style.zIndex = "0";
  let backgroundDiv = document.createElement("div");
  backgroundDiv.style.position = "absolute";
  backgroundDiv.style.top = "0";
  backgroundDiv.style.left = `${fullValue * startRatio}px`;  // 距离左侧的位置
  backgroundDiv.style.width = `${fullValue * ratio - 1}px`;  // 新 div 的宽度
  backgroundDiv.style.height = "100%";
  backgroundDiv.style.background = bgColor;
  cellRef.value.appendChild(backgroundDiv);
}
onMounted(()=>{
  // console.log('weekData',props.weekData)
  let cells = props.weekData.cells
  if(cells.length > 0){
    cells.forEach(ele => {
      cellBox(ele.startTime, ele.endTime, ele.color)
    });
  }else{
    cellBox('00:00', '24:00', 'var(--cellBg)') // 默认背景
  }
  // cellBox(props.weekData.startTime, props.weekData.endTime)
  week.value = props.weekData.week
})
// 计算两个时间之间的毫秒数
function TwoTimesMilliseconds(startTime, endTime) {
  const [startHour, startMinute] = startTime.split(":");
  const [endHour, endMinute] = endTime.split(":");
  const startDate = new Date(0, 0, 0, startHour, startMinute);
  const endDate = new Date(0, 0, 0, endHour, endMinute);
  if (endDate < startDate) {
    endDate.setDate(endDate.getDate() + 1);  // 如果结束时间在开始时间之前，将结束时间设置为第二天
  }
  return endDate - startDate;
}
</script>

<style scoped lang="scss">

</style>